<template>
  <div class="container">
    <Header></Header>

    <!-- 导航 -->
    <div class="nav">
      <van-tabs color="red" title-active-color="red" line-height="2px">
        <van-tab title="全部"></van-tab>
        <van-tab title="未付款"></van-tab>
        <van-tab title="已付款"></van-tab>
        <van-tab title="已发货"></van-tab>
        <van-tab title="待评价"></van-tab>
      </van-tabs>
    </div>

    <div style="height:15px;background-color: #eee;border-top: 1px solid #bbb;box-sizing: border-box;"></div>

    <!-- 订单列表 -->
    <div class="orderList">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="orderItem" v-for="item in orderList" :key="item.id">
          <div class="orderid">
            <span class="text">订单编号:{{ item.outTradeNo }}</span>
            <van-icon name="delete-o" />
          </div>

          <div class="orderBox" v-for="item1 in item.orderDetailList">
            <van-image
              width="70"
              height="70"
              :src="item1.imgUrl"
            />
            <div class="contentBox">
              <div class="title">{{ item1.skuName }}</div>
              <div>购买数量: <span style="color:red">{{ item1.skuNum }}</span></div>
            </div>
            <div class="rightBox">
              <div>状态</div>
              <div class="cencel">{{ item.orderStatusName }}</div>
            </div>
          </div>

        </div>
      </van-list>  
    </div>


  </div>
</template>

<script lang="ts" setup>
import {onMounted,ref} from 'vue'
import { reqOrderList } from '../../../api/center';
import { OrderListData } from '../../../types/center';

const orderList = ref<OrderListData[]>([])
const loading = ref(false);
const finished = ref(false);
const total = ref<number>(0)
const page = ref<number>(1)
// const filterOrderList = ref<OrderListData[]>([])

const getOrderList =async () => {
  let res = await reqOrderList(1,3)
  orderList.value = res.data.records
  total.value = res.data.total
}


const onLoad =async () => {
  /* 发送请求获取订单数据 */
  let res = await reqOrderList(page.value,3)
  /* 将获取到的数据和原来的数据进行合并 */
  orderList.value = [...orderList.value,...res.data.records]
  /* 订单页数加一,后面继续调用接口获取数据 */
  page.value++

  // 加载状态结束
  loading.value = false;

  // 数据全部加载完成
  if (orderList.value.length >= total.value) {
    finished.value = true;
  }
    
  };


// const filterList = (type:string) => {
//   if(type === '全部'){
//     filterOrderList.value = orderList.value
//   }else{
//     filterOrderList.value = orderList.value.filter(item =>  item.orderStatusName === type)
//   }
// }


onMounted(()=>{
  getOrderList()
})


</script>

<script lang="ts">
export default {
  name: 'myOrder'
}
</script>

<style lang="scss" scoped>
.container{
  .nav{
    height:42px;
    border-bottom: 1px solid #ddd;
  }
  .orderList{
    padding-left: 15px;
    .orderItem{
      .orderid{
        height:40px;
        border-bottom: 1px solid #ddd;
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        color:#666;
        .text{
          font-size: 14px;
        }
      }
      .orderBox{
        padding: 18px 0;
        font-size: 14px;
        color:#666;
        display: flex;
        padding-right: 15px;
        border-bottom: 1px solid #ddd;
        &:last-of-type{
          border: none;
        }
        .contentBox{
          width:200px;
          margin-left:10px;
          font-size: 12px;
          .title{
            line-height: 23px;
            font-size: 14px;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
        .rightBox{
          flex: 1;
          text-align: right;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding:8px 0;
          .cencel{
            color:red;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
